var oXk = document.getElementsByClassName('xk')[0];
var oUl = document.getElementsByClassName('imgs')[0];
var oLi = document.getElementsByClassName('imgs')[0].getElementsByTagName('li');
var oYuandian = document.getElementsByClassName('yuandian')[0].getElementsByTagName('li');
var jt = document.getElementsByTagName('span');
var c = 0;
var timer = null;

oUl.style.width = ((oLi[0].offsetWidth) * (oLi.length)) + 'px';
oYuandian[0].style.backgroundColor = '#ff6700';
oUl.style.left = -oLi[0].offsetWidth + 'px';
for (var i = 0; i < oYuandian.length; i++) {
    oYuandian[i].index = i;
    oYuandian[i].onclick = function () {
        for (var i = 0; i < oYuandian.length; i++) {
            oYuandian[i].style.backgroundColor = '#ccc';
        }
        oUl.style.left = -oLi[i].offsetWidth * (this.index + 1) + 'px';
        this.style.backgroundColor = '#ff6700';
        c = this.index;
    }
};



for (var i=0;i<oLi.length;i++) {
    index = i;
    jt[0].onclick = function () {
        if (parseInt(oUl.style.left)<-oLi[0].offsetWidth*oYuandian.length) {
            oUl.style.left = 0 + 'px';
        }
        oUl.style.left = (parseInt(oUl.style.left) - oLi[0].offsetWidth) + 'px';
    }
}


function lunbo() {
    timer = setInterval(function () {
        c++;
        if (c > oYuandian.length) { c = 1 };
        for (var i = 0; i < oYuandian.length; i++) {
            oYuandian[i].style.backgroundColor = '#ccc';
        }
        oUl.style.left = -oLi[0].offsetWidth * c + 'px';
        oYuandian[c - 1].style.background = '#ff6700';
    }, 1000
    )
}
lunbo();
oXk.onmouseover = function () {
    clearInterval(timer);
}
oXk.onmouseout = function () {
    lunbo();
}